<script>
//仪表盘配置
import BaseConfig from '../BaseConfig';
import * as ConfigEnum from '../config/config-enum';

export default {
  name: 'GaugeConfig',
  mixins: [BaseConfig],
  data() {
    return {
      radius: 75,
    };
  },
  created() {
    this.radius = parseInt(this.chartOptions.extend.series[0].radius);
  },
  methods: {
    updateRadius() {
      this.chartOptions.extend.series[0].radius = this.radius + '%';
      this.updateSeriesAndOptions('radius');
    },
  },
};
</script>

<template>
  <div>
    <Row>
      <Col span="8">
      <span>仪表盘半径：</span>
      </Col>
      <Col span="16">
      <Slider
        v-model="radius"
        @on-change="updateRadius"></Slider>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>刻度最小值：</span>
        </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.series[0].min"
        @on-change="updateSeriesAndOptions('min')"></InputNumber>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>刻度最大值：</span>
        </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.series[0].max"
        @on-change="updateSeriesAndOptions('max')"></InputNumber>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>刻度分段数：</span>
        </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.series[0].splitNumber"
        @on-change="updateSeriesAndOptions('splitNumber')"></InputNumber>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>起始角度：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.series[0].startAngle"
        @on-change="updateSeriesAndOptions('startAngle')"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>终止角度：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.series[0].endAngle"
        @on-change="updateSeriesAndOptions('endAngle')"></InputNumber>
      </Col>
    </Row>
  </div>
</template>

<style>
</style>
